<template>
  <div id="app">
    <div id="big">
      <ul>
        <li>
          <img :src="img[inx]" alt="" />
        </li>
      </ul>
    </div>
    <div id="small">
      <ol>
        <li
          v-for="(item, index) in img"
          :class="{ active: inx == index }"
          @click="cur(index)"
        >
          <img v-bind:src="item" alt="" />
        </li>
      </ol>
    </div>
    <div class="btn">
      <a id="left" @click="left">&lt;</a>
      <a id="right" @click="right">&gt;</a>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      img: ["/images/2.jpg", "/images/7.jpg", "/images/8.jpg", "/images/9.jpg"],
      inx: 0,
    };
  },
  created() {},
  mounted() {},
  methods: {
    // 点击高亮显示
    cur(index){
      this.inx=index;
      console.log(index);
    },
    // 往后退要-- 如果小于0 就到最后一张图
    left(){
      this.inx--;
      if(this.inx<0){
        this.inx=3
      }
    },
    // 往前加1 等于4就显示第一张图
    right(){
      this.inx++;
      if(this.inx==4){
        this.inx=0
      }
    }
  },
};
</script>
<style scoped lang='scss'>
* {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

button {
  border: none;
}

#app {
  width: 700px;
  height: 600px;
  margin: 10px auto;
  position: relative;
  overflow: hidden;
}

#big {
  width: 700px;
  height: 500px;
}
#big ul li img {
  position: absolute;
  left: 0;
  top: 0;
  width: 700px;
  height: 500px;
}

#big ul li {
  opacity: 1;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

#small {
  width: 700px;
  height: 100px;
  position: absolute;
}

#small li,
#small li img {
  width: 175px;
  height: 100px;
  background-size: 100%;
  // background: pink;
  float: left;
}

#small li {
  width: 175px;
  height: 100px;
  background: #000;
  opacity: 0.4;
  z-index: 999;
}

#small li.active {
  width: 175px;
  height: 100px;
  background: #000;
  opacity: 1;
  z-index: 0;
}
#left,
#right{
  position: absolute;
  top: 40%;
  font-size: 50px;
  color: antiquewhite;
}
#left{
  left: 5px;
}
#right{
  right: 5px;
}
</style>
